/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, {useEffect, useMemo} from 'react';
import {View, StyleSheet, Dimensions, Button} from 'react-native';
import Video from 'react-native-video';
import {videoRotationList as videos} from '../../components/videos';
import {AdaptiveRotation} from '@hadss/react_native_adaptive_video';
import Fold from '@hadss/react_native_adaptive_layout/src';

const VideoPlayer = ({route, navigation}) => {
  const {id} = route.params;
  const video = videos[id];
  const videoSize = useMemo(() => {
    return {
      width: video.width,
      height: video.height,
    };
  }, [video]);

  useEffect(() => {
    Fold.addFoldListener(() => {
      AdaptiveRotation.getInstance().setOrientationFullScreen(videoSize);
    });
    return () => {
      Fold.removeFoldListener();
    };
  }, [id, videoSize]);

  return (
    <View style={styles.container}>
      <Video
        source={{uri: `assets://${videos[id].source}`}}
        style={styles.video}
        resizeMode="contain"
        controls={false}
        onError={error => console.log('Video error:', error)}
        repeat={true}
      />
      <Button
        title="退出全屏"
        onPress={() => {
          AdaptiveRotation.getInstance().setOrientationNotFullScreen(videoSize);
          navigation.goBack();
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#000',
    position: 'relative',
    width: '100%',
    height: '100%',
    zIndex: 1,
  },
  videoContainer: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width * (9 / 16), // 16:9 比例
  },
  fullScreenVideoContainer: {
    width: Dimensions.get('window').height,
    height: Dimensions.get('window').width,
  },
  controlsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 50,
    width: '100%',
    zIndex: 2,
  },
  buttonText: {
    color: 'black',
    fontSize: 40,
    fontWeight: 'bold',
    backgroundColor: 'blue',
  },
  video: {
    width: '100%',
    height: '80%',
    zIndex: 1,
  },
  button: {
    left: 50,
    top: 20,
    zIndex: 2,
  },
});

export default VideoPlayer;
